/**
 * 入参
 *
 */
import React, { PropTypes, PureComponent, Fragment } from 'react';
import { NoDataC, PrimaryC, PrimaryGhostC, TableC } from '../../../../comps';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Card, Input, Button, message, Table, Popover, Tree, Select, Modal } from 'antd';
import style from '../index.less';
import { connect } from 'dva';
import _ from 'lodash';
const { TextArea } = Input;
const FormItem = Form.Item;
const FormItemLayout = {
  labelCol: {
    xl: { span: 10, offset: 0 },
    xxl: { span: 8, offset: 0 },
  },
  wrapperCol: {
    xl: { span: 13, offset: 0 },
    xxl: { span: 15, offset: 0 },
  },
};

class SettingColumnsC extends PureComponent {
  static defaultProps = {};
  state = {
    visible: false, //列设置弹窗
    checkedKeys: [], //当前选中的checkbox
    timeStamp: undefined,
  };
  componentDidMount() {}
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (this.state.timeStamp != nextProps.timeStamp) {
      this.formatTreeData(nextProps.data);
      this.setState({
        timeStamp: nextProps.timeStamp,
      });
    }
  }
  //设置树形结构数据
  formatTreeData = (currentData) => {
    const data = _.cloneDeep(currentData || []);
    const checkedKeys = [];
    data.map((item) => {
      if (item.key == 'tradingcode_suffix' || item.key == 'secuabbr' || item.key == 'status') {
        item.disabled = true;
      }
      if (item.selected == true) {
        checkedKeys.push(item.key);
      }
    });
    this.setState({
      treeData: [
        {
          title: '全部',
          key: 'all',
          children: data,
        },
      ],
      checkedKeys: [...checkedKeys],
    });
  };
  handleVisibleChange = (visible) => {
    if (!this.props.data?.length) return;
    this.setState({
      visible,
    });
  };

  onSelect = (selectedKeys, info) => {
    this.setState({
      checkedKeys: [...selectedKeys],
    });
  };

  cancelAction = () => {
    //不做修改 将恢复到打开之前的状态
    this.setState({
      visible: false,
      checkedKeys: _.cloneDeep([...this.state.checkedKeys]),
    });
  };

  handleOk = () => {
    const { checkedKeys } = this.state;
    if (this.state.checkedKeys.length == 0) {
      message.warning('请至少选择一列');
      return;
    }
    this.props.data.map((item) => {
      item.selected = false;
      checkedKeys.map((item1) => {
        if (item1 == item.key) {
          item.selected = true;
        }
      });
    });
    this.props.changeColumns(this.props.data);
    this.setState({
      visible: false,
    });
  };
  render() {
    const { treeData } = this.state;
    const content = (
      <div>
        <Tree treeData={treeData} checkable defaultExpandAll checkedKeys={this.state.checkedKeys} onCheck={this.onSelect} />
        <div className='btnArea'>
          <div className='btnCol'>
            <Button onClick={this.cancelAction} className='reset-button ' style={{ marginLeft: '56px' }}>
              取消
            </Button>
            <Button onClick={this.handleOk} className='search-button ' style={{ marginLeft: '11px' }}>
              确定
            </Button>
          </div>
        </div>
      </div>
    );

    return (
      <>
        <Popover
          placement='bottomLeft'
          content={content}
          trigger='click'
          visible={this.state.visible}
          overlayClassName={style.shstyle}
          onVisibleChange={this.handleVisibleChange}
          style={{ height: '317px', width: '240px' }}
        >
          <PrimaryGhostC title='展示列设置' style={{ marginBottom: '10px' }} disabled={this.props.data?.length == false} />
        </Popover>
      </>
    );
  }
}
export default SettingColumnsC;
